import {inject, observer} from "mobx-react";
import {toJS} from 'mobx';
import {WeaAlertPage} from 'ecCom';
import {createAttachLi} from '../../util/communicationUtil';
import {Spin} from 'antd';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

@observer
class Resource extends React.Component {
  constructor(props) {
    super(props);
  }
  
  //1 写一个componentDidMount，通过getCoworkDiscussData方法从store取数据
  componentDidMount() {
    const {WfFormCommunicationStore} = this.props;
    WfFormCommunicationStore.getResource();
  }
  
  componentWillReceiveProps(nextProps) {
  }
  
  render() {
    //4 传参
    const {WfFormCommunicationStore} = this.props;
    let {resource = {}} = WfFormCommunicationStore;
    resource = toJS(resource);
    if (!resource.readed) {
      return (
        <div className="top40 align-center"><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@b4bgv2`} /></div>
      );
    }
    let Document, Workflow, Customer, Project, Task, Accessory;
    //相关文档
    resource.docList && (
      Document = resource.docList.map((item, index) => {
        return (
          <li className="text-elli"><a href={item.url} target="_blank" title={item.name}>{item.name}</a></li>
        )
      }))
    
    //相关流程
    resource.wfList && (
      Workflow = resource.wfList.map((item, index) => {
        return (
          <li className="text-elli"><a href={item.url} target="_blank" title={item.name}>{item.name}</a></li>
        )
      }))
    
    //相关客戶
    resource.cusList && (
      Customer = resource.cusList.map((item, index) => {
        return (
          <li className="text-elli"><a href={item.url} target="_blank" title={item.name}>{item.name}</a></li>
        )
      }))
    
    //相关項目
    resource.mutilprjList && (
      Project = resource.mutilprjList.map((item, index) => {
        return (
          <li className="text-elli"><a href={item.url} target="_blank" title={item.name}>{item.name}</a></li>
        )
      }))
    
    //相关任务
    resource.taskList && (
      Task = resource.taskList.map((item, index) => {
        return (
          <li className="text-elli">
            <a href={item.url} target="_blank" title={item.name}>{item.name}</a>
          </li>
        )
      }))
    
    //相关附件
    resource.accList && (
      Accessory = resource.accList.map(createAttachLi))
    
    return (
      ((resource.docList && resource.docList.length !== 0) || (resource.wfList && resource.wfList.length !== 0) ||
      (resource.cusList && resource.cusList.length !== 0) || (resource.mutilprjList && resource.mutilprjList.length !== 0) ||
      (resource.taskList && resource.taskList.length !== 0) || (resource.accList && resource.accList.length !== 0)) ? (
        <div className='cowork-content-resource cowork-content-style-public'>
          {
            (resource.docList && resource.docList.length !== 0) && (
              <div>
                <div className='cowork-content-pub cowork-content-doc'>
                  <em className='icon-coms-currency2'></em>
                  <span>{getLabel(857, '相关文档')}</span>
                </div>
                <ul className='cowork-content-public cowork-content-document'>
                  {Document}
                  {/*<li><a>E8-DEMO网站需要修正的地方</a></li>
                   <li><a>E8-DEMO网站需要修正的地方</a></li>
                   <li><a>demo9档案</a></li>*/}
                </ul>
              </div>
            )
          }
          
          {(resource.wfList && resource.wfList.length !== 0) && (
            <div>
              <div className='cowork-content-pub cowork-content-workflow'>
                <em className='icon-coms-Relevant-workflow'></em>
                <span>{getLabel(1044, '相关流程')}</span>
              </div>
              <ul className='cowork-content-public cowork-content-document'>
                {Workflow}
              </ul>
            </div>
          )}
          
          {(resource.cusList && resource.cusList.length !== 0) && (
            <div>
              <div className='cowork-content-pub cowork-content-customer'>
                <em className='icon-coms-Relevant-Customer'></em>
                <span>{getLabel(783, '相关客户')}</span>
              </div>
              <ul className='cowork-content-public cowork-content-document'>
                {Customer}
              </ul>
            </div>
          )}
          
          {(resource.mutilprjList && resource.mutilprjList.length !== 0) && (
            <div>
              <div className='cowork-content-pub cowork-content-project'>
                <em className='icon-coms-Relevant-project'></em>
                <span>{getLabel(782, '相关项目')}</span>
              </div>
              <ul className='cowork-content-public cowork-content-document'>
                {Project}
              </ul>
            </div>
          )}
          
          {(resource.taskList && resource.taskList.length !== 0) && (
            <div>
              <div className='cowork-content-pub cowork-content-task'>
                <em className='icon-coms-Relevant-task'></em>
                <span>{getLabel(33414, '相关任务')}</span>
              </div>
              <ul className='cowork-content-public cowork-content-document'>
                {Task}
              </ul>
            </div>
          )}
          
          {(resource.accList && resource.accList.length !== 0) && (
            <div>
              <div className='cowork-content-pub cowork-content-acc'>
                <em className='icon-coms-Enclosure'></em>
                <span>{getLabel(22194, '相关附件')}</span>
              </div>
              <ul className='cowork-content-public cowork-content-accessory'>
                {Accessory}
                {/* <li>
                 <a>E8-DEMO网站需要修正的地方</a>
                 <i className='icon-coms-download'></i>
                 <span>2345K</span>
                 </li>*/}
              </ul>
            </div>
          )}
        
        
        </div>) : (
        <div style={{borderBottom : 0, marginTop : 20}} className="ant-table-placeholder">
          <i className="anticon anticon-frown"></i>
          <sapn>{getLabel(83553, '暂无数据')}</sapn>
        </div>
      ));
  }
}

export default Resource;